<template>
  <div id="app">
    <div class="todo-add">
      <todo-add @addData="add"></todo-add>
    </div>
    <div class="todo-show">
      <todo-item @delTodo="del" v-for="(item, index) in filterTodoArray" :key="index" :todo=item></todo-item>
    </div>
    <div class="todo-btn">
      <todo-button @clear="clearComplate" @change="changeStatus" :undone="undone"></todo-button>
    </div>
  </div>
</template>

<script>
import TodoAdd from './components/TodoAdd'
import TodoItem from './components/TodoItem'
import todoButton from './components/TodoButton'

export default {
  name: 'App',
  data() {
    return {
      todoArray:[],
      status:'all'
    }
  },
  computed:{
    undone(){
      //过滤数组中未删除及未完成的数据
      return this.todoArray.filter(item=>item.isDel==false && item.isComplate==false).length;
    },
    filterTodoArray(){
      if (this.status=='all') {
        return this.todoArray.filter(item=>item.isDel==false);
      }
      //status:active isComplate flase
      //status:complated isComplate true
      const done=this.status=='complated'
      return this.todoArray.filter(item=>item.isDel==false&&item.isComplate==done);
    }
  },
  methods: {
     clearComplate() {
      console.log(this.todoArray);
      this.todoArray = this.todoArray.map(item => {
        if (item.isComplate == true) {
          item.isDel = true;c 
        }
        return item;
      })
    },
    changeStatus(type){
      this.status=type
    },
    add(todo){
      this.todoArray.push(todo)
    },
    del(id){
      //直接删除
      //findIndex找出第一个满足条件返回true的元素下标
      let index = this.todoArray.findIndex(item => item.id==id);
      
      let newTodo=this.todoArray[index];
      newTodo.isDel=true;
      this.todoArray.splice(index,1,newTodo);
    }
  },
  components: {
    TodoAdd,
    TodoItem,
    todoButton
  }
}
</script>

<style lang="scss">
#app {
   width: 35vw;
   height: 80vh;
   background-color: white;
   display: flex;
   flex-direction: column;
   .todo-add{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 8vh;
     background: violet;

   }
   .todo-show{
     background-image: url(http://ci.xiaohongshu.com/41acfd3f-6fcd-34d2-9992-527b64e5cea4?imageView2/2/w/1080/format/jpg/q/75.jpg);
     background-repeat:no-repeat;
     background-size: 100% 100%  ;
     color: rgba(248, 10, 10, 0.822);
     //所有空余元素占满
     flex-grow: 1;
     
   }
   .todo-btn{
     height: 8vh;
     background: rgb(50, 195, 205);
   }
}
</style>
